<template>
  <Row id="article">
      <Card class="articlecard">
        <Tabs>
          <TabPane v-for="(v,i) in tablist" :key="v.i" :label="v.title">
              <Col :md="{span:24}" :xs="{span:24}" v-for="(vv,ii) in article[v.text]" :key="vv.ii" style="margin-top: 15px;">
                <router-link :to="'/article/'+vv.id" class="text">
                <Card dis-hover class="list_box">
                  <p class="text">{{vv.title}}</p>
                  <Row type="flex" justify="end">
                    <span class="time">{{vv.time}}</span>
                  </Row>
                </Card>
                </router-link>
              </Col>
          </TabPane>
        </Tabs>
      </Card>
  </Row>
</template>

<script>
    export default {
      name: "ArticleList",
      data() {
        return {
          'tablist': '',
          'article': ''
        }
      },
      methods: {
        getlist() {
          this.$axios({
            method: 'post',
            url: 'tp5_jzt-blog_server/public/index.php/home/articlelist',
          }).then((res) => {
            console.log('文章分类数据：',res.data);
            this.tablist = res.data
          }).catch((error) => {
            console.log(error)
          })
        },
        getarticle() {
          this.$axios({
            method: 'post',
            url: 'tp5_jzt-blog_server/public/index.php/home/articledata',
          }).then((res) => {
            console.log('文章列表数据：',res.data);
            this.article = res.data
          }).catch((error) => {
            console.log(error)
          })
        },
      },
      created() {
        this.getlist();
        this.getarticle();
      },
      mounted() {}
    }
</script>

<style scoped>
#article{
  width: 100%;
  height: 100%;
  padding: 15px;
}
  .articlecard{
    width: 100%;
    height: 100%;
  }
@media screen and (min-width: 769px) {
  .articlecard{
    margin: 0 auto;
    width: 60%;
    height: 100%;
  }
}
  .list_box{
    margin:5px;
    color: #000 !important;
  }
  .list_box:hover{
    border: 1px solid #2D8CF0 !important;
    color: #2D8CF0 !important;
  }
  .list_box .text{
    padding: 5px;
    font-size:16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .list_box .time{
    font-size: 12px;
  }
</style>
